/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Animated,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import JumpItem from '../components/JumpItem';
import ButtonItem from '../components/ButtonItem';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class NewMessage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            selectDtails:true,
            voice:true,
            shock:true
        };
        
    }
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'新消息通知'}
                    leftPress={()=>this.goBack()}/>
                <ScrollView>
                    <View style={styles.infoBox}>
                        <MessageItem title={'接收新消息通知'} text={'已开启'}/>
                    </View>
                    <View style={styles.infoBox}>
                        <ButtonItem onPress={()=>{this.setState({selectStaturs:!this.state.selectStaturs})}} title={'通知显示消息详情'} icon={this.state.selectStaturs?'openBtn':'closeBtn'}/>
                    </View>
                    <View>
                        <Text>若关闭，当接收到新消息时，通知提示将不显示发信人和内容摘要</Text>
                    </View>
                    <View style={styles.infoBox}>
                        <JumpItem title={'功能消息免打扰'} hasImg={true}/>
                    </View>
                    <View>
                        <Text>设置系统功能消息提示声音和震动的时段</Text>
                    </View>
                    <View style={styles.infoBox}>
                        <MessageItem title={'接收新消息通知'} text={'已开启'}/>
                    </View>
                    <View style={styles.infoBox}>
                        <ButtonItem style={{borderBottomWidth:1,borderBottomColor:'#E4E4E6'}} onPress={()=>{this.setState({voice:!this.state.voice})}} title={'声音'} icon={this.state.voice?'openBtn':'closeBtn'}/>
                        <ButtonItem onPress={()=>{this.setState({shock:!this.state.shock})}} title={'震动'} icon={this.state.shock?'openBtn':'closeBtn'}/>
                    </View>
                    <View style={{marginBottom:20}}>
                        <Text>运行时，你可以设置是否需要声音或者震动</Text>
                    </View>
                </ScrollView>   
            </View>
        )

    }

    goBack(){
        this.props.navigation.goBack();
    }
}
class MessageItem extends Component{
    render(){
        return(
            <View style={styles.messageBox}>
                <View style={{flex:1}}>
                    <Text style={{fontSize:16,color:'#151515'}}>{this.props.title}</Text>
                </View>
                <View  style={{marginRight:10}}>
                    <Text style={{color:'#A0A0A0'}}>{this.props.text}</Text>
                </View>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    }, 
    infoBox:{
        backgroundColor:'#fff',
        paddingLeft:10,
        borderTopWidth:1,
        borderTopColor:'#E4E4E6',
        borderBottomWidth:1,
        borderBottomColor:'#E4E4E6',
        marginTop:15
    },
    messageBox:{
        flexDirection:'row',
        alignItems:'center',
        height:40
    }
    
});